<script>
/* 去除Chrome字体最小12px的最终解决方案
 * 通用的一种文字容器：
 * 默认使用圆角，固定圆角为0.2vw
 * 预设颜色：Blue（默认），Red，Green，Yellow，Orange，Black，Pink
 * 没有高度，默认两倍字体高度
 * 默认字体大小为0.65vw，在1920宽度下，大约等于12px
 */

export default {
  // 控制组件用的参数
  props: {
    xText: null, // 文本内容
    xColor: null, // 文本颜色，支持16进制，不支持透明
    xSize: null // 文本大小
  },

  // 主要变量
  data: () => ({
    COLORA: "BaseE116E861D9FDF08F", // 鼠标悬浮时文字和边的颜色
    COLORS: ["Blue", "Red", "Green", "Yellow", "Orange", "Black", "Pink"], // 预设名称
    COLORL: "", // 用来存储用户定制的颜色
    SIZE: 0, // 默认的按钮文字大小
    WIDTH: 0, // 文本的宽度，由JS计算获得
    TERM: new RegExp(/^#([0-9a-fA-F]{6})$/) // 颜色匹配正则
  }),

  // 渲染前执行
  created() {
    this.SIZE = Number(this.xSize) || 0.65; // 获取文字大小，默认0.65vw
    this.UserColor();
  },

  // 渲染后执行
  mounted() {
    let V = document.body.clientWidth / 100; // 获取当前窗口1vw等于多少px
    let W = this.$refs.KL.offsetWidth / 10; // 获取被渲染后的内容宽度（px单位）
    this.WIDTH = W / V; // 将px单位转换成vw单位
  },

  watch: {
    xColor() {
      // 监听颜色变化
      this.UserColor();
    }
  },

  methods: {
    // 调整颜色
    UserColor() {
      if (this.COLORS.indexOf(this.xColor) > -1) {
        // 用户使用了预设颜色
        this.COLORA = this.xColor + "E116E861D9FDF08F";
      } else if (this.TERM.test(this.xColor)) {
        // 用户定制了颜色
        this.COLORA = "";
        this.COLORL = this.xColor;
      }
    }
  }
};
</script>

<template>
  <div class="BasisE116E861D9FDF08F" :style="{height:SIZE+'vw',width:WIDTH+'vw'}">
    <a
      class="EnlargeE116E861D9FDF08F"
      :class="[COLORA]"
      :style="{fontSize:SIZE*10+'vw',color:COLORL}"
      ref="KL"
    >{{xText||"Null"}}</a>
  </div>
</template>

<style scoped>
.BasisE116E861D9FDF08F {
  /* 按钮的基础样式 */
  transition-property: none !important;
  background-color: transparent;
  display: inline-block;
  border: none;
  padding: 0;
}

.EnlargeE116E861D9FDF08F {
  /* 强行把文字部分缩小10倍 */
  transform: translate(-50%, -50%) scale(0.1);
  transition-property: none !important;
  background-color: transparent;
  position: relative;
  white-space: pre;
  line-height: 1;
  border: none;
  float: left;
  left: 50%;
  top: 50%;
}

.BaseE116E861D9FDF08F {
  color: #333333;
}

.BlueE116E861D9FDF08F {
  color: #409eff;
}

.RedE116E861D9FDF08F {
  color: #ff3e3e;
}

.GreenE116E861D9FDF08F {
  color: #00d812;
}

.YellowE116E861D9FDF08F {
  color: #eeff00;
}

.OrangeE116E861D9FDF08F {
  color: #ffa600;
}

.BlackE116E861D9FDF08F {
  color: #333333;
}

.PinkE116E861D9FDF08F {
  color: #f7a3ff;
}
</style>